﻿@{
    ViewData["Title"] = "爱宠故事";
}
@section Style {
    <style>
        .el-select .el-input {
            width: 72px;
        }

        .el-input {
            width: 280px;
        }

        .input-with-select .el-input-group__prepend {
            background-color: #fff;
        }

        .petStoryDiv a {
            text-decoration: none;
            color: black;
            font-size: 15px;
        }

        .petStoryDiv a:hover {
            text-decoration: underline;
                color: RoyalBlue;
        }

        /* card组件样式 */
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-card__body {
            background-color: white;
            padding: 0px !important;
            height: 260px;
            font-size: 15px;
        }
    </style>
}
<div style="width:1020px;margin:auto;" class="petStoryDiv">
    <div style="margin-top:9px;height:100px;">
        <a href='@ViewData["bannerAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["bannerAdvertID"])"><img src='@ViewData["bannerAdvertImg"]' style="width:1020px; height:100px;" /></a>
    </div>
    <div style="margin-top:20px;">
        <div style="font-size:20px;font-weight:bold;text-align:left;"><span style="color:black;">最多阅读</span></div>
        <div><hr style="background-color:black;height:1px; border:none;" /></div>
        <el-row v-for="(ro, indexRo) in 1" style="margin-top:12px;" :gutter="10" class="input-box">
            <el-col :span="6" v-for="(co, indexCo) in mostReadStorys">
                <el-card style="box-shadow:none;">
                    <a :href="co.navurl" target="_blank" title="点击查看详细信息"><img :src="co.src" style="width:100%;height:162px;"></a>
                    <div style="padding: 0px; text-align:left;padding:4px;" class="elCardInfo">
                        <div style="font-weight:bold;font-size:16px;"><a :href="co.navurl" target="_blank" title="点击查看详细信息">{{co.title}}</a></div>
                        <div style="color:gray;font-size:14px;margin-top:5px;">{{co.subTitle}}</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <div style="margin-top:20px;">
        <div style="font-size:20px;font-weight:bold;text-align:left;"><span style="color:black;">最新故事</span></div>
        <div><hr style="background-color:black;height:1px; border:none;" /></div>
        <el-row v-for="(ro, indexRo) in 1" style="margin-top:12px;" :gutter="10" class="input-box">
            <el-col :span="6" v-for="(co, indexCo) in latestStorys">
                <el-card style="box-shadow:none;">
                    <a :href="co.navurl" target="_blank" title="点击查看详细信息"><img :src="co.src" style="width:100%;height:162px;"></a>
                    <div style="padding: 0px; text-align:left;padding:4px;" class="elCardInfo">
                        <div style="font-weight:bold;font-size:16px;"><a :href="co.navurl" target="_blank" title="点击查看详细信息">{{co.title}}</a></div>
                        <div style="color:gray;font-size:14px;margin-top:5px;">{{co.subTitle}}</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
    <div style="margin-top:30px;">
        <div>
            <div style="float: left;font-size:20px;font-weight:bold;">
                <span style="color:black;">故事集</span>
                </div>
            <div style="text-align: right;">
                <el-input placeholder="请输入搜索内容" v-model.trim="searchInput" class="input-with-select" size="mini">
                    <el-button slot="append" icon="el-icon-search" @@click="searchHandle"></el-button>
                </el-input>
            </div>
            <div style="clear:both;"></div>
        </div>
        <div id="splitLineForPetStoryList" style="background-color:black;height:1px;margin-top:8px;"></div>
    </div>
    <div style="margin-top:0px;width:1020px;">
        <div id="petStoryListDiv" style="width:700px;float:left;min-height:200px;"></div>
        <div id="advertDiv" style="height:258px;width:320px;background-color:silver;float:left;margin-top:10px;">
            <div style="background-color:#f5f5f5;color:gray;font-size:13px;">广告</div>
            <a href='@ViewData["blockAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["blockAdvertID"])"><img src='@ViewData["blockAdvertImg"]' style="width:320px; height:240px;" /></a>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div style="margin-top:20px;height:30px;width:1020px;background-color:#f5f5f5;justify-content: center;display:flex;">
        <a id="addMorePetStory" @@click.prevent="appendPetStoryHandle()" href="#" style="color:red;margin:auto;">加载更多</a>
        <span id="toTheEnd" style="color:gray;display:none;margin:auto;">已经到底了~</span>
    </div>
    <div id="hideDiv" style="display:none;">隐藏div</div>
</div>
@section Scripts {
    <script type="text/javascript">
        $("#petStory").css("color", "red");

        $(document).scroll(function () {
            var recTop = $("#splitLineForPetStoryList").offset().top;
            var scroH = $(document).scrollTop();//滚动高度
            if (scroH > recTop) {
                $('#advertDiv').css({
                    'position': 'fixed',
                    'top': '50px',
                    'margin-left': '700px'
                });
            }
            else {
                $('#advertDiv').css({
                    'position': '',
                    'top': '',
                    'margin-left': ''
                });
            }
        });

        var app = new Vue({
            el: "#app",
            mounted: async function () {
                let that = this;
                await that.appendPetStoryHandle(that);

                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                advertClickHandle(val) {
                    axios.post('../Home/AdvertClick', {
                        "advertID": val
                    }).then(response => {
                        console.log(response.data);
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
                //搜索
                searchHandle() {
                    if (app.searchInput.length > 20) {
                        this.$message.error('搜索内容不能超过20个字符');
                        return;
                    }

                    $("#petStoryListDiv").empty();
                    $("#petStoryListDiv").height(0);
                    $("#petStoryListDiv").css("min-height", 0);
                    app.lastPetStoryID = -1;

                    //搜索品种
                    axios.post('../Home/PetStory_Partial', {
                        "searchContent": app.searchInput,
                        "lastPetStoryID": app.lastPetStoryID,
                        "eliminatedIDs": app.eliminatedIDs
                    }).then(response => {
                        $("#hideDiv").append(response.data);
                        var batchDivHeight = parseInt($("#hideDiv #batchDiv").attr("tag"));
                        var batchDataCount = parseInt($("#hideDiv #batchDiv").attr("datacount"));

                        if (batchDivHeight > 0) {
                            $("#petStoryListDiv").height($("#petStoryListDiv").height() + batchDivHeight);
                            $("#petStoryListDiv").append(response.data);
                            app.lastPetStoryID = parseInt($("#hideDiv #batchDiv").attr("lastid"));
                        }
                        else {
                            $("#petStoryListDiv").css("min-height", 200);
                        }

                        if (batchDataCount < app.perBatchCount) {
                            $("#addMorePetStory").hide();
                            $("#toTheEnd").show();
                        }

                        $("#hideDiv").empty();
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
                //故事集数据获取
                async appendPetStoryHandle(obj) {

                    if (obj === null || obj === undefined)
                        obj = app;

                    await axios.post('../Home/PetStory_Partial', {
                        "searchContent": obj.searchInput,
                        "lastPetStoryID": obj.lastPetStoryID,
                        "eliminatedIDs": obj.eliminatedIDs
                    }).then(response => {
                        $("#hideDiv").append(response.data);
                        var batchDivHeight = parseInt($("#hideDiv #batchDiv").attr("tag"));
                        var batchDataCount = parseInt($("#hideDiv #batchDiv").attr("datacount"));

                        if (batchDivHeight > 0) {
                            $("#petStoryListDiv").height($("#petStoryListDiv").height() + batchDivHeight);
                            $("#petStoryListDiv").append(response.data);
                            obj.lastPetStoryID = parseInt($("#hideDiv #batchDiv").attr("lastid"));
                        }

                        if (batchDataCount < obj.perBatchCount) {
                            $("#addMorePetStory").hide();
                            $("#toTheEnd").show();
                        }

                        $("#hideDiv").empty();
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                }
            },
            data() {
                return {
                    mostReadStorys: @Html.Raw(ViewData["mostReadStorys"]),
                    latestStorys: @Html.Raw(ViewData["latestStorys"]),
                    perBatchCount: @Html.Raw(ViewData["perBatchCount"]),
                    eliminatedIDs: @Html.Raw(ViewData["eliminatedIDs"]),
                    searchInput:'',
                    lastPetStoryID: -1,
                }
            }
        });
    </script>
}
